<template>
  <section>
    <!--搜索栏-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="部门"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getDep">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--管理列表-->
    <!--
    	  :data="tableList"绑定
	      loading：listLoading 加载样式  转圈圈
        @selection-change="selsChange" 多选框
        sortable 排序
    -->
    <el-table :data="pageInfo.data" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="120" sortable>
      </el-table-column>

      <el-table-column prop="descs" label="描述" width="180" sortable>
      </el-table-column>

      <el-table-column prop="sn" label="sn" width="320" sortable>
      </el-table-column>

      <el-table-column prop="parent.name" label="父权限" width="120" sortable>
      </el-table-column>

      <el-table-column prop="url" label="请求路径" width="120" sortable>
      </el-table-column>
    </el-table>

    <!--列表操作-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="pageInfo.data.total" style="float:right;">
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 搜索
      // 搜索
      filters: {
        name: '',
        pageSize:10,   //条数
        currentPage:1  //页数
      },
      pageInfo: {
        data: [],
        total: 0,
      },

      total: 0,
      page: 1,
      listLoading: false,
      sels: [],//列表选中列

      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      },
      //编辑界面数据
      editForm: {
        id: 0,
        name: '',
        sex: -1,
        age: 0,
        birth: '',
        addr: ''
      },

      addFormVisible: false,//新增界面是否显示
      addLoading: false,
      addFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      },
      //新增界面数据
      addForm: {
        name: '',
        sex: -1,
        age: 0,
        birth: '',
        addr: ''
      }
    }
  },

  methods: {
    handleCurrentChange(val) {
      this.page = val;
      // this.filters.currentPage = val;
      this.getDep();
    },

    //获取部门列表
    getDep() {
      console.log("获取权限")
      //获取参数  keyword  pageSize  currentPage
      //发起请求

      this.$http.post("/permission", this.filters)
          .then(res => {
            console.log("获取权限2")
            res = res.data
            console.log("获取权限3")
            // console.log("res.data.data",res = res.data.data())
            if (res.success){
              // 从后端获取数据渲染
              this.pageInfo.data = res.data.data;
              console.log(this.pageInfo.data)
            }else {
              this.$message.error("网络异常请联系管理员");
            }
          })
          .catch(res => {
          })
    },

    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        removeUser(para).then((res) => {
          this.listLoading = false;
          //NProgress.done();
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getDep();
        });
      }).catch(() => {

      });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    //显示新增界面
    handleAdd: function () {
      this.addFormVisible = true;
      this.addForm = {
        name: '',
        sex: -1,
        age: 0,
        birth: '',
        addr: ''
      };
    },
    //编辑
    editSubmit: function () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.editForm);
            para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
            editUser(para).then((res) => {
              this.editLoading = false;
              //NProgress.done();
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.$refs['editForm'].resetFields();
              this.editFormVisible = false;
              this.getDep();
            });
          });
        }
      });
    },
    //新增
    addSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.addForm);
            para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
            addUser(para).then((res) => {
              this.addLoading = false;
              //NProgress.done();
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.$refs['addForm'].resetFields();
              this.addFormVisible = false;
              this.getDep();
            });
          });
        }
      });
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id).toString();
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        let para = { ids: ids };
        batchRemoveUser(para).then((res) => {
          this.listLoading = false;
          //NProgress.done();
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getDep();
        });
      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getDep();
  }
}

</script>

<style scoped>

</style>